<template>
  <div class="pay">
    <div class="main">
      <p>你的订单已创建成功，请尽快付款</p>
      <h2>{{ orderInfo.orderTitle }}</h2>
      <div class="price">
        <span>¥ {{ orderInfo.totalRent }}</span>
      </div>
      <h2>请选择支付方式</h2>
      <div class="logo">
        <el-button style="border: none;" @click="toPay(orderInfo.orderNo)"><img alt="" src="../../assets/120_348_白底.png"></el-button>
        <img src="../../assets/按钮标签.png" style="width: 42px;height: 25px;margin-left: 8px">
      </div>
      <div class="title">支付完成后，将跳转到订单列表页面</div>
      <div v-if="orderInfo.status===1">
        你已经支付过此账单，无需再次支付
      </div>
      <div v-if="orderInfo.status===1">
        <el-button @click="orderCheck">回到订单页面</el-button>
      </div>
      <div>
        <el-button class="btn" @click="payNo">暂不支付</el-button>
      </div>


<!--      <div class="footer">
        <el-button class="btn1" @click="payNo">暂不支付</el-button>
        <el-button class="btn" @click="payYes1(orderInfo.orderNo)">支付成功</el-button>
      </div>-->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Login from "@/components/Login";


export default {
  name: "Pay",
  components: {Login},
  created() {
    this.getOrderInfo()
  },
  data() {
    return {
      orderInfo:{
        orderNo:'',
      }
    }
  },
  methods: {
    orderCheck(){
      this.$router.push({
        path: "/index/admin/myOrder", query: {id: this.orderInfo.id}
      })
    },
    //暂不支付
    payNo() {
      this.$message.warning("即将在3s后跳转到我的订单页面，请稍后...")
      setTimeout(() => {
        this.$router.push({
          path: "/index/admin/myOrder", query: {id: this.orderInfo.id}
        })
      }, 3000)
    },
    toPay(orderNo) {
      window.location.href = "http://localhost:8090/alipay/pay?orderNo=" + orderNo
    },
    //支付完成
    payYes() {
      //表示已经支付过订单
      if (this.orderInfo.status ===1){
        this.$message.warning("你已支付过该订单，无需再次支付！")
        setTimeout(() => {
          this.$router.push({
            path: "/index/admin/myOrder", query: {id: this.orderInfo.id}
          })
        },2000)
      }else {
        const id = this.$route.query.id;
        console.log(id)
        axios({
          url: "http://localhost:8090/order/update/" + id,
          method: 'put',
        }).then(res => {
          if (res.code === '200') {
            //支付成功后，创建租赁信息
            axios({
              url:"http://localhost:8090/lease/create",
              method:'post',
              data:{
                houseId:this.orderInfo.houseId,
                userId:this.orderInfo.userId,
                orderId:this.orderInfo.id,
                landlordId:this.orderInfo.landlordId
              }
            }).then(res=>{
              if (res.code === '200'){
                this.$message.success("支付成功！即将在3s后跳转到我的订单页面，请稍后...")
                setTimeout(() => {
                  this.$router.push({
                    path: "/index/admin/myOrder", query: {id: this.orderInfo.id}
                  })
                }, 3000)
              }
            })
          }
        })
      }
    },


    getOrderInfo(){
      const id = this.$route.query.id;
      axios({
        url:"http://localhost:8090/order/orderPay/"+id,
        methods: 'get',
      }).then(res=>{
          if (res.code === '200'){
            console.log(res.data)
            this.orderInfo = res.data
          }
      })
    }
  }
}
</script>

<style scoped>
.pay {
  width: 100%;
  min-height: 821px;
  background-color: #f8f9fe;
  padding-top: 50px;
}

.main {
  width: 500px;
  height: 500px;
  background-color: white;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  text-align: center;
}

.main h2 {
  font-size: 20px;
}

.main .price {
  font-size: 40px;
  margin: 20px 0;
}

.main img {
  width: 200px;
  height: 200px;
}

.title {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  margin-bottom: 60px;
}

.logo{
  border: 1px solid #ebedf0; /* 添加边框 */
  border-radius: 4px;       /* 可选圆角 */
  padding: 8px;             /* 可选内边距 */
  display: inline-flex;     /* 保持原有布局 */
  align-items: center;      /* 保持原有布局 */
}
.logo img{
  width: 130px;
  height: 40px;
}

.footer {
  display: flex;
  align-items: center;
}

.footer p {
  font-size: 14px;
  color: #999;
  margin-right: 20px;
}

.btn {
  width: 200px;
  height: 40px;
  background-color: green;
  color: white;
}

.btn1 {
  width: 200px;
  height: 40px;
  background-color: #0b5481;
  color: white;
}

.btn:hover,
.btn:focus {
  background-color: green;
  color: white;
}
</style>